<template>
	<view class="device_list">
		<!-- 头部设备状态 -->
		<view class="device_top">
			<view class="device_top_item">
				<image src="../../static/image/zhan_one@2x.png" mode=""></image>
				<h2>{{stationList.work_normal}}</h2>
				<span>正常</span>
			</view>
			<view class="device_top_item">
				<image src="../../static/image/zhan_two@2x.png" mode=""></image>
				<h2>{{stationList.work_stop}}</h2>
				<span>故障</span>
			</view>
			<view class="device_top_item">
				<image src="../../static/image/zhan_three@2x.png" mode=""></image>
				<h2>{{stationList.work_fault}}</h2>
				<span>停机</span>
			</view>
		</view>
 		<!-- 下方列表区 -->
		<scroll-view scroll-y class="device_con">
			<view class="device_con_item" v-for="item in lists">
				<view class="item_top" @click="goSiteDetails(item.id)">
					<image class="imageone" src="../../static/image/zhan_add@2x.png"></image>
					<span>{{item.station_name}}</span>
					<image class="imagetow" v-show="item.station_status == 2" src="../../static/image/zhan_four@2x(1).png" mode=""></image>
					<image class="imagetow" v-show="item.station_status == 1" src="../../static/image/zhan_five@2x.png" mode=""></image>
					<image class="imagetow" v-show="item.station_status == 3" src="../../static/image/zhan_six@2x.png" mode=""></image>
				</view>
				
				<view class="item_con" @click="goSiteDetails(item.id)">
					<table class='item_con_table'>
						<tr v-for="i in item.station_base_param.paraminfo">
							<td>{{i.object_desc}}</td>
							<td>{{i.param}}</td> 
						</tr> 
					</table>
					<!-- <p v-for="i in item.station_base_param.paraminfo"><span>{{i.object_desc}}：</span><span style="color: #2595FF">{{i.param}}</span></p> -->
				</view>
				
			</view>
		</scroll-view>
		<!-- 下载进度条 -->
		<div class='curr_progress'  v-show='currProgress > 1 && currProgress < 100' >
		  <span>{{currProgress}}%</span> 
		</div>
		<!-- 点击刷新 -->
		<view class='refresh'  @click='upData'>
			<image :class="['refresh_img', isRefresh? 'turn': '']" src="../../static/image/refresh.png" mode=""></image>
			<text>刷新</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stationList: '',
				lists: '', 
				// 版本号
				oldVersion: '1.3.1',
				// 最新版本号
				newVersion: '',
				// 下载地址
				downloadurl: '',
				currProgress: 0,
				isShowProgress: false,
				isRefresh: false
			};
		},
		mounted() {
			this.getStationList()
			this.getSiting()

			clearInterval(this.time)
			this.time = setInterval(() => {
				this.getStationList()
			}, 20000)
		},
		// 页面跳转 清除定时器
		onHide() {
			clearInterval(this.time)
		},
		methods: { 
			getStationList(info) {
				let that = this 
				if(info == 'change'){
					that.isRefresh = true
				}  
				that.$http({
					url: '/wxapi/PowerApi/getStationList',
					method: 'POST'
				}).then(res => { 
					if (res.code == 200) { 
						if(info == 'change'){
							uni.showToast({
								title:'刷新成功',
								icon:'none'
							})
							that.isRefresh = false
						}
						that.stationList = res.data
						that.lists = res.data.list
					}
				})
			}, 
		
			// 点击更新
			upData(){  
				this.getStationList('change')
			},
			// 去站点详情
			goSiteDetails(id) { 
				uni.navigateTo({
					url: `../siteDetails/siteDetails?id=${id}`
				})
			},
			// 检测版本更新
			getSiting() {
				let that = this
				this.$http({
					url: '/wxapi/UserApi/getSiting',
					methods: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.newVersion = res.data.app_version
						that.downloadurl = res.data.app_downloadurl
						if (that.newVersion !== that.oldVersion) {
							uni.showModal({
								title: '版本更新',
								content: `发现新版本 ${that.newVersion}, 点击立即更新`,
								success(res) {
									if (res.confirm) { 
										const downloadTask = uni.downloadFile({
											url: that.downloadurl,
											success: (res) => {
												if (res.statusCode === 200) {  
												}
												// let that = this;
												uni.saveFile({
													tempFilePath: res.tempFilePath,
													success: function(red) {
														uni.openDocument({
															filePath: red.savedFilePath,
															success: (res) => {}
														})
													}
												});
											}
										});

										downloadTask.onProgressUpdate((res) => { 
											 that.currProgress = res.progress
										});
									}
								}
							})
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.device_list {
		height: 100%;
		background-color: #f3f5f7;

		.device_top {
			padding: 40rpx 0;
			display: flex;
			justify-content: space-around;
			height: 200rpx;
			border-top: 1rpx solid #eee;
			background-color: #2595FF;

			.device_top_item {
				flex: 1;
				text-align: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				h2 {
					margin: 40rpx 0;
					font-size: 60rpx;
					color: #fff;
				}

				span {
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
		 
		.device_con {  
			margin: 0 20rpx 60rpx 20rpx;
			width: calc(100vw - 40rpx);
			height: calc(100vh - 300rpx);
			
			& .device_con_item:last-child{
				margin-bottom: 20rpx;
			}
			
			.device_con_item {
				margin-top: 20rpx;
				padding: 20rpx;
				font-size: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				
				.item_top {
					height: 75rpx;
					line-height: 80rpx;
					color: #2595FF; 
					border-bottom: 1rpx solid #959595;

					.imageone {
						margin-right: 20rpx;
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}

					.imagetow {
						float: right;
						height: 100rpx;
						width: 100rpx;
					}
				}

				.item_con {
					padding-top: 30rpx;
					.item_con_table{
						width: 100%;
						font-size: 26rpx; 
						// border: 1px solid #2595ff;
						tr,td {
							// border: 1px solid #2595ff;
						}
						td { 
							text-align: center;
							padding: 10rpx 0 10rpx 10rpx;
						}
						& td:nth-child(odd){
								text-align: left;
						}
						& td:nth-child(even){
								color: #2595ff; 
						}
					} 
				} 
			} 
		}
		.curr_progress{
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 200rpx;
			height: 200rpx;
			line-height: 200rpx;
			font-size: 40rpx;
			text-align: center;
			background-color: #eee;
			border-radius: 50%;
		}
		.refresh{
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 70rpx;
			height: 70rpx;
			font-size: 26rpx;
			color: #2595FF;
			text-align: center;
			.refresh_img{
				margin-bottom: 10rpx;
				width: 100%;
				height: 100%;
			}
		}
	} 
	.turn{ 
	      animation:turn .5s linear infinite;     
	    }
	@keyframes turn{
	      0%{-webkit-transform:rotate(0deg);} 
	      50%{-webkit-transform:rotate(180deg);} 
	      100%{-webkit-transform:rotate(360deg);}
	    }
</style>
